/*
描述：用户点赞管理视图组件，用于展示用户点赞过的问题列表
完成人：吴悠
完成时间: 2025/04/27
*/



<script setup lang="ts">

import { ref, onMounted } from 'vue'; // 导入 ref 和 onMounted
import MyLikeQuestionComponent from '@/components/UserView/MyLikeQuestionComponent.vue'
import HeaderComponent from '@/components/HomeView/HeaderComponent.vue';
import MyNavbar from '@/components/UserView/MyNavbar.vue';
import QuestionComponent from "@/components/HomeView/QuestionComponent.vue";
import RecentQuestion from "@/components/HomeView/RecentQuestion.vue";


const userId = ref<number | null>(null); // 创建响应式变量存储 userId

onMounted(() => {
  const storedUserId = localStorage.getItem('id');
  console.log(storedUserId)
  if (storedUserId) {
    userId.value = parseInt(storedUserId, 10);
  }
  // 可以添加未找到 userId 的处理逻辑，例如重定向到登录页
});

</script>

<template>
  <el-container>
    <HeaderComponent/>
    <el-container>
      <el-aside width="20%">
        <div class="sidebar-menu-left">
          <MyNavbar :now-page="3" />
        </div>

      </el-aside>
      <el-main class="body">
        <MyLikeQuestionComponent v-if="userId !== null" :user-id="userId"></MyLikeQuestionComponent>
        <p v-else>localStorage中没有用户的信息</p> <!-- 添加加载状态或错误提示 -->
      </el-main>
      <el-aside width="20%">
        <div class="sidebar-menu-right">
          <RecentQuestion/>
        </div>
      </el-aside>
    </el-container>
  </el-container>
</template>

<style scoped>

.body{
  height: 100%;
  padding: 0 20px 20px 20px;
}

.sidebar-menu-left{
  display: flex;
  flex-direction: column;
  align-items: center;
  position: fixed;  /* 元素脱离文档流，相对于浏览器窗口固定定位 */
  top: 84px;
  height: 100vh;
  margin-left: 5%;
}
.sidebar-menu-right{
  display: flex;
  flex-direction: column;
  align-items: center;
  position: fixed;  /* 元素脱离文档流，相对于浏览器窗口固定定位 */
  top: 84px;
  height: 100vh;
}

</style>
